<!--
 * @Author: zhangwenqiang
 * @Date: 2021-07-24 21:48:35
 * @LastEditors: OBKoro1
 * @LastEditTime: 2021-07-26 22:27:14
 * @FilePath: /operate/src/App.vue
-->
<template>
  <div id="app">
    <router-view></router-view>
    <transition name="el-fade-in-linear">
      <div class="loading-container" v-if="loading">
        <div class="loading-content">
          <img src="./assets/loading.png" alt="" class="loading-icon"/>
          <p class="text">拼命加载中</p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Vuex from "vuex";
const mapGetters = Vuex.mapGetters;
import { newApply } from "@/api/operate";
export default {
  name: "App",
  provide() {
    return {
      showMessageHandler: this.showMessage
    };
  },
  data() {
    return {
      showMessage(data) {
        let { message, type = "success" } = data;
        this.$message({
          message,
          type,
          showClose: true,
          center: true
        });
      }
    };
  },
  computed: {
    ...mapGetters(["loading"])
  },
  mounted() {
    // this.$store.commit("user/SET_LOADING", true);
    // newApply().then(res => {
    //   this.$store.commit("user/SET_LOADING", false);
    // });
    
  }
};
</script>
<style lang="scss" scoped>
  #app {
    background: #F5F7FF;
    .loading-container {
      background: rgba(36, 45, 82, 0.46);
      width: 100%;
      height: 100%;
      z-index: 10000;
      position: fixed;
      top: 0;
      left: 0;
      .loading-content {
        position: relative;
        top: 50%;
        margin-top: -30px;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        height: 60px;
        text-align: center;
        color: #fff;
        .loading-icon {
          width: 28px;
          animation: myLoading 1s infinite linear;
          @keyframes myLoading {
            from {
              transform: rotate(0);
            }
            to {
              transform: rotate(360deg);
            }
          }
        }
        .text {
          font-size: 14px;
          line-height: 25px;
        }
      }
    }
  }
</style>

